<script setup>
import { computed, ref ,defineProps, onMounted } from 'vue'

const show = ref(false)
const top = ref(0)
const left = ref(0)
const menu = ref(null)
let father=null
const prpos= defineProps({
    menuStyle: {
      type: Object,
      default: () => ({})
    },
    forBox: {
        type: String,
        //必传
        required: true,
    }
})
onMounted(() => {

     father=document.querySelector(`#${prpos.forBox}`)
    document.addEventListener('mousedown', handleOutsideClick)
    father.addEventListener('contextmenu', handleClick)
})


const handleClick = (event) => {
    // 阻止默认事件

  event.preventDefault()
  //阻止冒泡
  event.stopPropagation()
  console.log(father)
  show.value = true
  top.value = event.clientY
  left.value = event.clientX
}

const handleClose = () => {
  show.value = false
}
const handleOutsideClick = (event) => {
  if(menu.value.contains(event.target)){
    return
  }else{
    handleClose()
  }
}




</script>

 <template> 
    <div class="right-click-menu" 
    :style="{ top: `${top}px`, left: `${left}px` , display: show? 'block' : 'none' ,...menuStyle }"
    ref="menu"
    >
        <slot>

        </slot>
    </div>
</template>
 
 <style scoped>
.right-click-menu {
    position: fixed;
    background-color: #fff;
    border: 1px solid #909090;
    padding: 5px;
    z-index: 9999;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    width: 100px;
    height: auto;
}


</style>